<template>
	<view class="hot-recommon base-maxwidth">
		<view class="hot-title">热门推荐</view>
		<custom-water-falls ref="waterfallsFlowRef" :value="data.list"  :column="column" :columnSpace="1.5" :seat="2" @itemClick="navigatorToMoment" @loadImages="loadImages"  @loaded="loaded">
			<view class="recommon-list" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
				<view class="item">
					<view class="title">{{item.title}}</view>
					<!-- <view class="desc">{{item.desc}}</view> -->
					<view class="user-info">
						<image class="avatar" :src="item.avatar"></image>
						<view class="user-name">jackLLLL</view>
						<view class="like-num">375</view>
					</view>
				</view>
			</view>
        </custom-water-falls>
	</view>
</template>

<script>
	import customWaterFalls from '@/components/custom-waterfalls-flow/custom-waterfalls-flow.vue'
	// import postDetail from "@/subpages/postDetail/postDetail.vue"
	export default {
		components: {
			// postDetail,
			customWaterFalls,
		},
		data() {
			return {
				data: {
				list: [
					{
						id: 1,
						image: 'https://img.zcool.cn/community/01654e5c824404a80120af9a9b6667.jpg@2o.jpg',
						title: '我是标题1',
						desc: '描述描述描述描述描述描述描述描ddddddddddddddddddddd述1',
						avatar:'https://img.zcool.cn/community/01654e5c824404a80120af9a9b6667.jpg@2o.jpg' ,
					}, 
					{
						id: 2,
						image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.RGmKDveLMo2Ml8YEzYGtKgHaEo?w=280&h=180&c=7&r=0&o=5&pid=1.7',
						title: '我是标题2',
						desc: '描述描述描述描述描述描述描述描述2',
						avatar:'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215388977.jpg',
					}, 
					{
						id: 3,
						image: 'https://img.chongshe.cn/5164168ff42796c7.jpg',
						title: '我是标题3', 
						desc: '描述描述描述描述描述描述描述描述3',
						avatar:'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215388977.jpg' ,
					}, 
					{
						id: 4,
						image: 'https://img.zcool.cn/community/016c325543065e0000019ae909489a.jpg@1280w_1l_2o_100sh.jpg',
						title: '我是标题4',
						desc: '描述描述描述描述描述描述描述描述4',
						avatar:'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215388977.jpg' ,
					}, 
					{
						id: 5,
						image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.EmFzJhy6p2uzHfFip_NaIAHaKX?pid=ImgDet&rs=1',
						title: '我是标题5',
						desc: '描述描述描述描述描述描述描述描述5',
						avatar:'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215388977.jpg' ,
					}, 
					{
						id: 6,
						image: 'https://img.zcool.cn/community/010e415d284bb9a80120b5ab1c1aba.jpg@1280w_1l_2o_100sh.jpg',
						title: '我是标题6',
						desc: '描述描述描述描述描述描述描述描述6',
						avatar:'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215388977.jpg' ,
					}, 
					{ 
						id: 7,
						image: 'https://img.zcool.cn/community/0156ab5b418935a80120b95992188b.jpg@1280w_1l_2o_100sh.jpg',
						title: '我是标题7',
						desc: '描述描述描述描述描述描述描述描述7',
						avatar:'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215388977.jpg' ,
					},
					]
				},
				column: 2,
				imageKey: 'image'
			}
		},
		onLoad: function() {
		},
		methods: {
			add() {
				const newArr = [
				{ image: 'https://via.placeholder.com/58x100.png/FF7F50', title: '我是标题8', desc: '描述描述描述描述描述描述描述描述8' }, 
				{ image: 'https://via.placeholder.com/59x100.png/C0C0C0', title: '我是标题9', desc: '描述描述描述描述描述描述描述描述9' }, 
				{ image: 'https://via.placeholder.com/60x100.png/FAEBD7', title: '我是标题10', desc: '描述描述描述描述描述描述描述描述10' }]
				this.data.list = this.data.list.concat(newArr);
			},
			changeColumn(h) {
				this.column = !h ? this.column - 1 : this.column + 1;
			},
			loaded() {
				console.log('加载完成')
			},
			wapperClick(item) {
				console.log('单项点击事件', item)
			},
			imageClick(item) {
				console.log('图片点击事件', item)
			},
			loadImages() {
				console.log('加载图片')
			},
			reset() {
				this.data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
				this.$refs.waterfallsFlowRef.refresh();
			},
			navigatorToMoment(item) {
				console.log('点击了',item)
				var url = '/subpages/postDetail/postDetail?id='+item.id
				uni.navigateTo({
					url,
				})
			},
	},
	}
</script>

<style>
	.hot-recommon {
		/* margin-top: 10px; */
		padding-top: 10px; 
		background-color: #fafafa;
		/* background-color: green; */
	}
	
	.hot-recommon .hot-title {
		position: relative;
		margin-left: 40px;
		font-weight: 800;
		margin-top: 10px;
		font-size: 16px;
		margin-bottom: 20px;
	}
	
	.hot-recommon .hot-title::before {
		position: absolute;
		display: block;
		top: -4px;
		left: -30px;
		width: 30px;
		height: 30px;
		background: url("@/static/images/index/hot.gif");
		background-size: contain;
		content: '';
	}
	
	.recommon-list {
		border: 1px ;
	}
	
	.recommon-list .item {
		box-shadow: rgb(0 0 0 / 80%) 0px 1px 4px;
	}

	.recommon-list .title {
		margin: 0 10px 6px;
		padding-top: 10px;
		font-size: 16px;
		font-weight: 600;
		color: #101829;
		text-overflow: ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:3;
	}
	
	.recommon-list .desc {
		width: 100%;
		overflow:hidden;
		font-size: 12px;
		text-overflow: ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:1;
	}
	
	.user-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.user-info .avatar {
		width: 30px;
		height: 30px;
		margin: 6px 10px 10px 10px;
		border-radius: 50%;
	}
	
	.user-info .user-name {
		font-size: 12px;
		margin-right: auto;
	}
	
	.user-info .like-num {
		position: relative;
		font-size: 12px;
		margin-right: 20px;
	}
	
	.user-info .like-num::before {
		position: absolute;
		content: '';
		display: block;
		left: -21px;
		top: -2px;
		width: 20px;
		height: 20px;
		background: url('@/static/images/tabicon/unlike.png');
		background-size: cover;
		z-index: 1;
	}
</style>